<template>
    <div class="intank_properties">
        <div class="dateTimetab">
            <div
                v-for="(item, index) in timelist"
                :key="index"
                :class="itemvalue === index ? 'isclick' : ''"
                @click="itemvalue = index"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="propertiesecharts">
            <chart-view
                :chart-option="EchartsMethods.tankproperties()"
                style="height: 100%; width: 100%"
                :auto-resize="true"
                width="100%"
                height="100%"
            ></chart-view>
        </div>
        <div class="propertiesecharts">
            <chart-view
                :chart-option="EchartsMethods.combustible()"
                style="height: 100%; width: 100%"
                :auto-resize="true"
                width="100%"
                height="100%"
            ></chart-view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { EchartsMethods } from '@/chart/index';
import ChartView from '@/chart/index.vue';

const itemvalue = ref(0);
const timelist = ref([{ name: '30天' }, { name: '近7日' }, { name: '今日' }, { name: '自定义' }]);
</script>

<style scoped lang="scss">
.dateTimetab {
    display: flex;

    > div {
        width: 80px;
        height: 24px;
        line-height: 24px;
        background: rgba(27, 147, 251, 0.2);
        text-align: center;
        margin-right: 8px;
        font-size: 14px;
        color: #ffffff;
    }

    .isclick {
        background: #1b93fb;
    }
}
.propertiesecharts {
    padding-top: 20px;
    height: 200px;
}
</style>
